<template>
	<view class="head-content">
		<view class="head" @click='goSetup'>
			<image class='img' :src="getImg"></image>
			<view class="text">
				<p>欢迎您：{{ getName }}</p>
				<p>
					<span>{{ getAppID }}</span>
				  <image class='img' :src="getGender == 1 ? man:women"></image>
				</p>
			</view>
		</view>
	</view>
</template>

<script>
	import man from '@/static/order/man.png'
	import women from '@/static/order/women.png'
	export default{
		data(){
			return{
				man: man,
				women: women
			}
		},
		computed:{
			getAppID(){
				return this.$store.state.a.appId
			},
			getImg(){
				return this.$store.state.a.infoImg
			},
			getName(){
				return this.$store.state.a.infoName
			},
			getGender(){
				return this.$store.state.a.infoGender
			}
		},
		methods:{
			goSetup(){
				uni.navigateTo({
					url: '/pages/tab4/view/setup/setup'
				})
			}
		}
	}
</script>

<style lang='scss'>
	.head{
		width: 95%;
		height: 220rpx;
		margin-left: 2.5%;
		box-shadow: 0 0 6rpx #C8C7CC;
		background-color: white;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		.img{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			margin-left: 20rpx;
		}
		.text{
			width: 70%;color: #5E5E5E;
			height: 150rpx;
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			p:first-child{
				font-size: 35rpx;
			}
			p:last-child{
				font-size: 32rpx;
				position: relative;
				.img{
					position: absolute;
					right: 30rpx;
					bottom: 0;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>
